import React,{useState,useEffect, useRef} from 'react'
import LazyLoad, {forceCheck} from 'react-lazyload' //图片懒加载 ，placeholder里为占位图，当图片无法出现时，可以用forceCheck
import Scroll from '../../baseUI/scroll'
import {Content} from './style'
import {Bothside} from './style'
import loading from '../../assets/images/loading.gif'
import header from '../../assets/images/logo.png'
import SearchInput from '../../components/searchInput/SearchInput'
import Focussquare from '../../components/focussquare/Focussquare'
import Focus from '../../components/foucus/Focus'
import * as api from '../../api/index'

export default function Community() {
    const catRef = useRef();
    const [types,setType]=useState([
        {id:1,val:'我的'},
        {id:2,val:'步行街'},
        {id:3,val:'游戏'},
        {id:4,val:'NBA'},
        {id:5,val:'CBA'},
        {id:6,val:'国际足球'},
        {id:7,val:'综合体育'},
        {id:8,val:'搞笑趣味'},
        {id:9,val:'影视娱乐'},
        {id:10,val:'二次元'},
        {id:11,val:'装备'},
        {id:12,val:'中国足球'},
        {id:13,val:'汽车'},
        {id:14,val:'数码'},
        {id:15,val:'城市'},
        {id:16,val:'站务管理'}
    ])

    const [ light,setLight] =useState(0) 
    const [ item, setItem ] = useState(1);
    const [ spot,setSpot] = useState([]);
    const [ hobby,setHobby] = useState({})
    const [appear,setAppear] = useState(1)
    const [kinds,setKinds]= useState([
        {id:1,val:'足球'},
        {id:2,val:'篮球'},
        {id:3,val:'棒球'},
        
    ]);
    const fetchList = () =>{
        api
        .focus(item)
        //应为.focus 是个promise函数，仍需要 .then 一下
        //遇是不觉，直接console.log参数
        .then(res =>{
            // console.log(res, '___');
            //这样的形式，就是把之前的数组和后面的新数据，形成一个包含所有数据的数组
            setSpot([
                ...spot,
                ...res.data.data.listcommunity.spot
            ])
            setHobby(
                hobby=> hobby=res.data.data.community
            )
            // console.log(hobby,'//////');
        })
    }
    const { NBAdata=[],
            gamekind=[],
            pedestrianstreet=[],
            CBAdata=[],
            globalsoccer=[],
            sports=[],
            funny=[],
            movies=[],
            cartoon=[],
            equipment=[],
            chinasoccer=[],
            car=[],
            Digital=[],
            city=[],
            complaints=[]
            }=hobby
    const changeappear = () =>{
        // ref1.current.onScroll()
            catRef.current.getBScroll().scrollTo(0,-20)
            
           if(appear===2){
               setAppear(1)
           }else{
               setAppear(2)
           }
    }

    const scrollToright = (y) => {
        if(y===0){
            catRef.current.getBScroll().scrollTo(0,0)
        }else if(y===1){
            catRef.current.getBScroll().scrollTo(0,-120)
        }else if(y===2){
            catRef.current.getBScroll().scrollTo(0,-430)
        }else if(y===3){
            catRef.current.getBScroll().scrollTo(0,-800)
        }else if(y===4){
            catRef.current.getBScroll().scrollTo(0,-1680)
        }else if(y===5){
            catRef.current.getBScroll().scrollTo(0,-2148)
        }else if(y===6){
            catRef.current.getBScroll().scrollTo(0,-2862)
        }else if(y===7){
            catRef.current.getBScroll().scrollTo(0,-3321)
        }else if(y===8){
            catRef.current.getBScroll().scrollTo(0,-3773)
        }else if(y===9){
            catRef.current.getBScroll().scrollTo(0,-4087)
        }else if(y===10){
            catRef.current.getBScroll().scrollTo(0,-4210)
        }else if(y===11){
            catRef.current.getBScroll().scrollTo(0,-4521)
        }else if(y===12){
            catRef.current.getBScroll().scrollTo(0,-4893)
        }else if(y===13){
            catRef.current.getBScroll().scrollTo(0,-4693)
        }else{
            catRef.current.getBScroll().scrollTo(0,-5014)
            if(y===14){
                setLight(14)
            }else{
                setLight(15)
            }
        }
        // catRef.current.getBScroll().scrollTo(0,-200)
    }
    useEffect(()=>{
        fetchList()
    },[])

    return (
        <div>
            <SearchInput/>
            <Focussquare changeappear={changeappear} />
            <Content style={appear==1?{}:{display:"none"}}>
            <Scroll
                direction={"vertical"}
                refresh={false}               
                >
                    <div>
                        <Focus spot={spot}/>
                    </div>
            </Scroll>
            </Content>
            <Content style={appear==1?{display:"none"}:{}}>
                <Bothside>
                    <div className="left">
                                {
                                    types.map((item, index)=>{
                                        return <div 
                                                    className='type' 
                                                    key={index} 
                                                    style={index === light?{
                                                        color:"red",backgroundColor:"#fefffe"
                                                    }:{}}
                                                    onClick={() => scrollToright(index)}
                                                    >
                                                    {item.val}
                                                    </div>
                                    })
                                }
                    </div>
                    <div className="right"> 
                   <Scroll
                        direction={"vertical"}
                        refresh={true}
                        ref={catRef}
                        // ref={ref1}
                        // 滑动的监听事件
                        // onScroll={forceCheck}
                        onScroll={
                            (e) => {
                                forceCheck()
                                // console.log(e.y)
                                if (e.y > -120) {
                                    setLight(0)
                                } else if(e.y > -405) {
                                    setLight(1)
                                } else if(e.y > -765){
                                    setLight(2)
                                } else if(e.y > -1626){
                                    setLight(3)
                                } else if(e.y > -2068){
                                    setLight(4)
                                } else if(e.y > -2762){
                                    setLight(5)
                                } else if(e.y > -3211){
                                    setLight(6)
                                } else if(e.y > -3653){
                                    setLight(7)
                                } else if(e.y > -3937){
                                    setLight(8)
                                } else if(e.y > -4050){
                                    setLight(9)
                                } else if(e.y > -4331){
                                    setLight(10)
                                } else if(e.y > -4393){
                                    setLight(11)
                                } else if(e.y > -4693){
                                    setLight(12)
                                } else if(e.y > -5014){
                                    setLight(13);
                                }
                                // 懒加载
                                // forceCheck()
                            }
                        }
                        >
                            <div>
                                {/* 关注 */}
                                <p className="label">您的关注：</p>
                                <div className='box'>
                                    
                                    {
                                        kinds.map((kind, index)=>{
                                            return <div className='kind' key={index}>
                                                <img src={header} 
                                                    className='kind-img' />
                                                 <div className='kind-font'>
                                                     {kind.val}
                                                 </div> 
                                                
                                            </div>
                                        })
                                    }
                                </div>
                                    {/* 步行街 */}
                                <p className="label">步行街：</p>
                                <div className='box'>
                                    {
                                        pedestrianstreet.map((kind, index)=>{
                                            return <div className='kind' key={index}>
                                                    <LazyLoad placeholder={<img width="100%" height="100%" src={loading}/>}>
                                                        <img src={kind.picUrl} 
                                                        className='kind-img' />
                                                    </LazyLoad>
                                                <div className='kind-font'>
                                                    {kind.title}
                                                </div>
                                            </div>
                                        })
                                    }
                                </div>
                                {/* 游戏 */}
                                <p className="label">游戏：</p>
                                <div className='box'>
                                    {
                                        gamekind.map((kind, index)=>{
                                            return <div className='kind' key={index}>
                                                 <LazyLoad placeholder={
                                                        <img width="100%" height="100%" 
                                                                src={loading}/> 
                                                            }><img src={kind.picUrl} 
                                                        className='kind-img' /></LazyLoad>
                                                <div className='kind-font'>
                                                    {kind.title}
                                                </div>
                                            </div>
                                        })
                                    }
                                </div>
                                {/* nba */}
                                <p className="label">NBA：</p>
                                <div className='box'>                                    
                                    {
                                        NBAdata.map((kind, index)=>{
                                            return <div className='kind' key={index}>
                                                         <LazyLoad placeholder={
                                                        <img width="100%" height="100%" 
                                                                src={loading}/> 
                                                            }><img src={kind.picUrl} 
                                                        className='kind-img' /></LazyLoad>
                                                        <div className='kind-font'>
                                                            {kind.title}
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                                    {/* CBA */}
                                <p className="label">CBA：</p>
                                <div className='box'>                                    
                                    {
                                        CBAdata.map((kind, index)=>{
                                            return <div className='kind' key={index}>
                                                         <LazyLoad placeholder={
                                                        <img width="100%" height="100%" 
                                                                src={loading}/> 
                                                            }><img src={kind.picUrl} 
                                                        className='kind-img' /></LazyLoad>
                                                        <div className='kind-font'>
                                                            {kind.title}
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                                {/* 国际足球 */}
                                <p className="label">国际足球：</p>
                                <div className='box'>                                    
                                    {
                                        globalsoccer.map((kind, index)=>{
                                            return <div className='kind' key={index}>
                                                         <LazyLoad placeholder={
                                                        <img width="100%" height="100%" 
                                                                src={loading}/> 
                                                            }><img src={kind.picUrl} 
                                                        className='kind-img' /></LazyLoad>
                                                        <div className='kind-font'>
                                                            {kind.title}
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                                    {/* 综合体育 */}
                                <p className="label">综合体育：</p>
                                <div className='box'>                                    
                                    {
                                        sports.map((kind, index)=>{
                                            return <div className='kind' key={index}>
                                                         <LazyLoad placeholder={
                                                        <img width="100%" height="100%" 
                                                                src={loading}/> 
                                                            }><img src={kind.picUrl} 
                                                        className='kind-img' /></LazyLoad>
                                                        <div className='kind-font'>
                                                            {kind.title}
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                                {/* 搞笑趣味 */}
                                <p className="label">搞笑趣味：</p>
                                <div className='box'>                                    
                                    {
                                        funny.map((kind, index)=>{
                                            return <div className='kind' key={index}>
                                                        <LazyLoad placeholder={
                                                        <img width="100%" height="100%" 
                                                                src={loading}/> 
                                                            }><img src={kind.picUrl} 
                                                        className='kind-img' /></LazyLoad>
                                                        <div className='kind-font'>
                                                            {kind.title}
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                                {/* 影视娱乐 */}
                                <p className="label">影视娱乐：</p>
                                <div className='box'>                                    
                                    {
                                        movies.map((kind, index)=>{
                                            return <div className='kind' key={index}>
                                                         <LazyLoad placeholder={
                                                        <img width="100%" height="100%" 
                                                                src={loading}/> 
                                                            }><img src={kind.picUrl} 
                                                        className='kind-img' /></LazyLoad>
                                                        <div className='kind-font'>
                                                            {kind.title}
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                                {/* 二次元 */}
                                <p className="label">二次元：</p>
                                <div className='box'>                                    
                                    {
                                       cartoon.map((kind, index)=>{
                                            return <div className='kind' key={index}>
                                                        <LazyLoad placeholder={
                                                        <img width="100%" height="100%" 
                                                                src={loading}/> 
                                                            }><img src={kind.picUrl} 
                                                        className='kind-img' /></LazyLoad>
                                                        <div className='kind-font'>
                                                            {kind.title}
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                                {/* 装备 */}
                                <p className="label">装备：</p>
                                <div className='box'>                                    
                                    {
                                      equipment.map((kind, index)=>{
                                            return <div className='kind' key={index}>
                                                         <LazyLoad placeholder={
                                                        <img width="100%" height="100%" 
                                                                src={loading}/> 
                                                            }><img src={kind.picUrl} 
                                                        className='kind-img' /></LazyLoad>
                                                        <div className='kind-font'>
                                                            {kind.title}
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                                {/* 中国足球 */}
                                <p className="label">中国足球：</p>
                                <div className='box'>                                    
                                    {
                                      chinasoccer.map((kind, index)=>{
                                            return <div className='kind' key={index}>
                                                         <LazyLoad placeholder={
                                                        <img width="100%" height="100%" 
                                                                src={loading}/> 
                                                            }><img src={kind.picUrl} 
                                                        className='kind-img' /></LazyLoad>
                                                        <div className='kind-font'>
                                                            {kind.title}
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                                {/* 汽车 */}
                                <p className="label">汽车：</p>
                                <div className='box'>                                    
                                    {
                                      car.map((kind, index)=>{
                                            return <div className='kind' key={index}>
                                                        <LazyLoad placeholder={
                                                        <img width="100%" height="100%" 
                                                                src={loading}/> 
                                                            }><img src={kind.picUrl} 
                                                        className='kind-img' /></LazyLoad>
                                                        <div className='kind-font'>
                                                            {kind.title}
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                                {/* 数码 */}
                                <p className="label">数码：</p>
                                <div className='box'>                                    
                                    {
                                      Digital.map((kind, index)=>{
                                            return <div className='kind' key={index}>
                                                       <LazyLoad placeholder={<img width="100%" height="100%" src={loading}/> }>
                                                           <img src={kind.picUrl}  className='kind-img' />
                                                        </LazyLoad>
                                                        <div className='kind-font'>
                                                            {kind.title}
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                                {/* 城市 */}
                                <p className="label">城市：</p>
                                <div className='box'>                                    
                                    {
                                      city.map((kind, index)=>{
                                            return <div className='kind' key={index}>
                                                        <LazyLoad placeholder={
                                                        <img width="100%" height="100%" 
                                                                src={loading}/> 
                                                            }><img src={kind.picUrl} 
                                                        className='kind-img' /></LazyLoad>
                                                        <div className='kind-font'>
                                                            {kind.title}
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                                {/* 站务管理 */}
                                <p className="label">站务管理：</p>
                                <div className='box'>                                    
                                    {
                                      complaints.map((kind, index)=>{
                                            return <div className='kind' key={index}>
                                                        <LazyLoad placeholder={
                                                        <img width="100%" height="100%" 
                                                                src={loading}/> 
                                                            }><img src={kind.picUrl} 
                                                        className='kind-img' /></LazyLoad>
                                                        <div className='kind-font'>
                                                            {kind.title}
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>

                            </div>
                    </Scroll>
                    </div> 
                </Bothside>
            </Content>
        </div>
    )
}
